<template>
  <div class="lnglat-select-search" :class="'lnglat-select-search--' + layoutSkin ">
    <el-input v-model="value" 
    id="lnglat-select-input"
    @keyup.down.native.prevent="keyDown"
    @keyup.up.native.prevent="keyUp"
    @keydown.enter.native.prevent="enter"
    @blur="blur"
    @focus="focus"
    placeholder="请输入关键字进行检索" class="search">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <transition name="el-zoom-in-top">
      <div class="content" v-show="options.length">
        <el-scrollbar :style="{'height': '300px'}" :native="false" v-if="options.length">
            <div v-for="(item,index) in options" class="item"
            @click="clickHandle(item,index)"
            :class="[currentIndex === index ? 'active' : '']"
            :key="item.pointid">
              {{ item.name }}
            </div>
        </el-scrollbar>
        <!-- <p v-else class="empty-data">
            <icon-svg name="wushuju"></icon-svg>
          暂无数据
        </p> -->
      </div>
    </transition>
  </div> 
</template>
<script>
export default {
  inject: ['rootStore'],
  data() {
    return {
      value: '',
      showContent: false,
      currentIndex: -1,
      options: [],
      placeSearch: null,
      geocoder: null
    };
  },
  watch: {

    value(val) {
      if (!this.placeSearch) {
        const AMap = this.store.AMap;
        const map = this.store.map;
        this.placeSearch = new AMap.PlaceSearch({
          pageSize: 20, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: false, // 是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          // panel: 'lnglat-select-panel', // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
      }
      // 关键字查询
      this.placeSearch.search(val, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          this.options = result.poiList.pois;
        }
      });
    }
  },
  computed: {
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    },
    store() {
      return this.rootStore.store;
    }
  },
  methods: {
    keyUp() {
      if (this.currentIndex === 0) {
        this.currentIndex = this.options.length - 1;
      } else {
        this.currentIndex--;
      }
    },
    keyDown() {
      if (this.currentIndex === this.options.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
    },
    blur() {
      setTimeout(_ => {
        this.showContent = false;
        this.options = [];
      }, 200);
    },
    focus() {
      if (this.value) {
        this.showContent = true;
      }
      if (this.placeSearch) {
        this.placeSearch.search(this.value, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.options = result.poiList.pois;
          }
        });
      }
    },
    enter() {
      const item = this.options.find((v, i) => i === this.currentIndex);
      this.value = item.name;
      this.$emit('item-select', item);
      this.blur();
    },
    clickHandle(item, index) {
      this.currentIndex = index;
      this.value = item.name;
      this.$emit('item-select', item);
    }
  },
  created() {
    // this.options = this.$store.state.gis.pointList;
  }
};

</script>
<style lang="scss">
.lnglat-select-search{
  position: absolute;
  z-index: 999;
  width: 300px;
  top: 10px;
  left: 20px;
  .search{
    .el-input__inner{
      border: 0;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 3px;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }
  }
  .content{
      cursor: pointer;
      height: 300px;
      margin-top: 10px;
      border: 0;
      background-color: rgba(255, 255, 255, 0.8);
      color: #5f6477;
      border-radius: 3px;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
      .el-scrollbar__wrap{
        overflow-x:hidden;
      }
      .item{
        // height: 30px;
        line-height: 30px;
        padding-left: 10px;
      }
      .item:hover{
        background: rgba(164, 209, 243, 0.15);
      }
      .active{
         background: rgba(164, 209, 243, 0.15);
      }
  }
  .empty-data{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding:20px;
    .icon-svg{
      font-size: 60px !important;
    }
  }
  &--dark{
    .search{
      .el-input__inner{
        color: white;
        background-color:rgba(7, 75, 125, 0.5);
      }
    }
    .content{
      color: white;
       background-color:rgba(7, 75, 125, 0.5);
      .item:hover{
        background: #0d436b;
      }
      .active{
         background: #0d436b;
      }
    }
  }
}
</style>